/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  	AppRegistry,
  	StyleSheet,
  	Text,
  	View,
  	TextInput,
  	Modal,
  	TouchableHighlight,
  	Dimensions,
  	ListView,
  	TouchableOpacity,
  	Image,
} from 'react-native';

exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '<Modal>';
exports.description = 'Component for presenting modal views.';

var Button = React.createClass({
  getInitialState() {
    return {
      active: false,
    };
  },

  _onHighlight() {
    this.setState({active: true});
  },

  _onUnhighlight() {
    this.setState({active: false});
  },

  render() {
    var colorStyle = {
      color: this.state.active ? '#fff' : '#000',
    };
    return (
      <TouchableHighlight
        onHideUnderlay={this._onUnhighlight}
        onPress={this.props.onPress}
        onShowUnderlay={this._onHighlight}
        style={[styles.button, this.props.style]}
        underlayColor="#a9d9d4">
          <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
      </TouchableHighlight>
    );
  }
});

class Dialog extends Component {
	constructor(props) {  
		super(props);
		this.state={
			animationType: 'none',
      		modalVisible: this.props.modalVisible,
		    transparent: true,
		};
  	}
	
	static propTypes = {
		_pressRow: React.PropTypes.func, // 跳转到对应tab的方法
	}
	
	
	_renderRow(rowData, sectionID, rowID){
        return (
        	<TouchableOpacity onPress={()=>this.props._pressRow(rowData)}>
			    <View style={styles.devices}>
					<Image source={require('./../image/devices/bra.png')} style={{width:60,height:60}}/>
					<View style={{justifyContent: 'center'}}>
					    <Text style={{fontSize:16}}>{rowData.name}</Text>
					    <Text style={{fontSize:13}}>mac:{rowData.id}</Text>
					</View>
			    </View>
		    </TouchableOpacity>
        );
    }
	
	_setModalVisible(){
		this.setState({modalVisible:false});
	}
	
	render() {
		var buttonpress = {
	    	onPress: this.props.onPressBtn
	    };
	    
		var modalBackgroundStyle = {
	      	backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
	    };
	    var innerContainerTransparentStyle = this.state.transparent
	      	? {backgroundColor: '#fff', padding: 0}
	      	: null;
	    var activeButtonStyle = {
	      	backgroundColor: '#ddd'
	    };
	    
	    return (
	    	<Modal
				animationType={this.state.animationType}
				transparent={this.state.transparent}
				visible={this.props.modalVisible}
				onRequestClose={() => this._setModalVisible(false)}
				>
				<View style={[styles.container2, modalBackgroundStyle]}>
					<View style={[styles.innerContainer, innerContainerTransparentStyle]}>
						<View style={[styles.container,{height:40,width:Dimensions.get('window').width-40,borderBottomWidth:2}]}>
							<Text>{this.props.title}</Text>
						</View>
						<ListView 
							style={{height:300}}
							enableEmptySections = {true}
			      			dataSource={this.props.dataSource}
			      			renderRow={this._renderRow.bind(this)}/>         
						<Button
			               	{...buttonpress}
			               	style={styles.modalButton}>
			               	关闭
			            </Button>
					</View>
			    </View>
			</Modal>	
	    );
	}
}

const styles = StyleSheet.create({
	container: {
	    justifyContent: 'center',
	    alignItems: 'center',
	    //backgroundColor: '#F5FCFF',
	},
	container2: {
	    flex: 1,
	    justifyContent: 'center',
	    paddingLeft:20,
		paddingRight:20,
  	},
  	innerContainer: {
	    borderRadius: 10,
	    alignItems: 'center',
	},
	modalButton:{
		width:Dimensions.get('window').width,
		paddingLeft:20,
		paddingRight:20,
		borderTopWidth:1,
		height:40,
	    justifyContent: 'center',
	    alignItems: 'center',
	},
	devices:{
  		width:Dimensions.get('window').width-40,
  		height:70,
  		borderBottomWidth:1,
		borderBottomColor:"#959595",
  		justifyContent: 'center',
    	alignItems: 'center',
    	flexDirection:'row',
  	},
  	addBtn:{
  		width:90,
  		height:68,
  		justifyContent: 'center',
  		alignItems: 'center',
  		backgroundColor: '#ff0000',
  		marginRight:20,
  	}
});

module.exports = Dialog;
